<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="120px">
      <h2 style="text-align: center">20xx年度设备维护保养计划</h2>
      <h4 class="form-header h4">
        设备维护保养计划
        <el-button type="primary" plain size="mini" @click="handleAdd">增行</el-button>
        <el-button type="danger" plain size="mini" @click="handleDele">删行</el-button>
      </h4>
      <el-table :data="formData.itemList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column width="150" label="设备编号" prop="deviceCode" align="center">
        </el-table-column>
        <el-table-column label="设备名称" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`itemList.${scope.$index}.deviceId`" :rules="rules.deviceId">
              <el-select v-model="scope.row.deviceId" placeholder="请选择设备名称" clearable filterable
                @change="changeDevice($event, scope.$index)" :style="{ width: '100%' }">
                <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                  :value="item.deviceId" :disabled="item.disabled">
                  <span style="float: left">{{ item.deviceName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.deviceCode
                  }}</span></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="150" label="型号" prop="spec" align="center">
        </el-table-column>
        <el-table-column width="150" label="维护保养内容" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`itemList.${scope.$index}.content`" :rules="rules.content">
              <el-input v-model="scope.row.content" placeholder="请输入维护保养内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="维护保养周期" prop="price" width="150" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`itemList.${scope.$index}.carePeriod`" :rules="rules.carePeriod">
              <el-input v-model="scope.row.carePeriod" placeholder="请输入维护保养周期" clearable :style="{ width: '100%' }">
                <template slot="append">个月</template>
              </el-input>
              <!-- <el-date-picker
                type="month"
                v-model="scope.row.carePeriod"
                format="yyyy-MM"
                value-format="yyyy-MM"
                :style="{ width: '100%' }"
                placeholder="请选择维护保养周期"
                clearable
              ></el-date-picker> -->
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="部门" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`itemList.${scope.$index}.deptId`" :rules="rules.deptId">
              <el-cascader :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false"
                :ref="'reference' + scope.$index" placeholder="请选择部门" :style="{ width: '100%' }"
                @change="changeDep($event, scope.$index)" v-model="scope.row.deptId" :options="deptOptions"></el-cascader>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="维护保养人" prop="price" width="150" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`itemList.${scope.$index}.careUserId`" :rules="rules.careUserId">
              <!-- {{scope.row.flag  }} -->
              <el-input v-if="scope.row.flag == 1" v-model="scope.row.managerUserName" placeholder="请选择维护保养人"
                :disabled="true"></el-input>
              <!-- <UserDialog v-if="scope.row.flag == 0" placeholder="请选择设维护保养人" @change="changeCultivate($event, scope.$index)"
                v-model="scope.row.careUserId"></UserDialog>
              <el-button @click="changeUserName(scope.$index)"  size="small">更换维护保养人</el-button> -->

            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column width="150" label="备注" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`itemList.${scope.$index}.remark`" :rules="rules.remark">
              <el-input v-model="scope.row.remark" placeholder="备注"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { deviceList } from "@/api/device/device.js";
import {
  deviceCarePlanAdd,
  updategdeviceCarePlan,
  deviceCarePlanInfo,
} from "@/api/device/deviceCarePlan.js";
export default {
  components: {},
  dicts: ["sys_device_check_type"],
  props: [],
  data() {
    return {
      formData: {
        itemList: [
          {
            careUserId: undefined,
            deviceId: undefined,
            spec: undefined,
            deviceCode: undefined,
            carePeriod: null,
            content: undefined,
            remark: undefined,
            deptId: undefined,
          },
        ],
      },
      deptOptions: [],
      rules: {
        careUserId: [
          {
            required: true,
            message: "请选择维护保养人员",
            trigger: "change",
          },
        ],

        content: [
          {
            required: true,
            message: "请输入维护保养内容",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        carePeriod: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],
      },
      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
    this.getDeptTree();
  },
  mounted() { },
  methods: {
    changeDep(e, i) {
      console.log(e);
      // console.log(this.$refs["reference" + i].getCheckedNodes()[0].value);
    },
    handleAdd() {
      this.formData.itemList.push({
        careUserId: undefined,
        deviceId: undefined,
        spec: undefined,
        deviceCode: undefined,
        carePeriod: null,
        content: undefined,
        remark: undefined,
        deptId: undefined,
      });
    },
    handleDele() {
      if (this.formData.itemList.length == 1) return;
      this.formData.itemList.pop();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeDevice(i, index) {
      let row = this.deviceOptions.find((e) => e.deviceId == i);
      console.log(row);
      if (row) {
        this.formData.itemList[index].deviceName = row.deviceName;
        this.formData.itemList[index].deviceCode = row.deviceCode;
        this.formData.itemList[index].spec = row.spec;
        this.formData.itemList[index].deptId = row.deptId;
        this.formData.itemList[index].deptName = row.deptName;
        this.formData.itemList[index].careUserName = row.managerUserName;
        this.formData.itemList[index].careUserId = row.managerUserId;
        this.formData.itemList[index].content = row.careContent;
        this.formData.itemList[index].carePeriod = row.carePeriod.toString();
        console.log(this.formData.itemList[index].careUserId);
      } else {
        this.formData.itemList[index].deviceCode = undefined;
        this.formData.itemList[index].deviceName = undefined;

        this.formData.itemList[index].spec = undefined;
        this.formData.itemList[index].deptId = undefined;
        this.formData.itemList[index].deptName = undefined;
      }
    },
    changeCultivate(e, i) {
      this.formData.itemList[i].careUserName = e.nickName;
    },
    listSelect() {
      deviceList({ status: 1, busStatus: -1 }).then((response) => {
        this.deviceOptions = JSON.parse(JSON.stringify(response.data));
        if (!(this.$route.query.isEdit || this.$route.query.isInfo)) {
          this.formData.itemList = response.data;
          this.formData.itemList.forEach((e, index) => {
            e.careUserName = response.data[index].managerUserName;
            e.careUserId = response.data[index].managerUserId;
            e.content = response.data[index].careContent;
            e.flag = 1
          });
        }
        console.log(this.formData.itemList[0],'this.formData.itemList');
      });
    },
    changeUserName(e){
      this.$set(this.formData.itemList[e],'flag',0)
      this.$for
      console.log(this.formData.itemList[e]);
    },
    getinfo() {
      deviceCarePlanInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
      console.log(this.content);
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.itemList.forEach((e, i) => {
            query.itemList[i].deptId =
              this.$refs["reference" + i].getCheckedNodes()[0].value;
            query.itemList[i].deptName = this.$refs["reference" + i]
              .getCheckedNodes()[0]
              .pathLabels.pop();
          });
          if (this.formData.deviceCarePlanId != undefined) {
            updategdeviceCarePlan(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceCarePlanAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./deviceCarePlan" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
